import { Chart } from "@antv/g2";


import { useEffect, useRef } from "react";

// 算法可视化
const Algorithm=()=>{
  const container = useRef<any>(null);
useEffect(()=>{
    const chart = new Chart({ container: container.current });
// 在不同视图之间执行连续的过渡动画。通过 mark.key 和 mark.groupKey 去关联图形。
chart.options({
  type: "timingKeyframe",
  children: [
    {
      type: "interval",
      data: [
        { index: 0, value: 6, swap: true },
        { index: 1, value: 43, swap: true },
        { index: 2, value: 5, swap: false },
        { index: 3, value: 24, swap: false },
        { index: 4, value: 53, swap: false },
        { index: 5, value: 78, swap: false },
        { index: 6, value: 82, swap: false },
        { index: 7, value: 63, swap: false },
        { index: 8, value: 49, swap: false },
        { index: 9, value: 6, swap: false },
      ],
      encode: { x: "index", y: "value", key: "index", color: "swap" },
    
    },
    {
      type: "interval",
      data: [
        { index: 0, value: 2, swap: false },
        { index: 1, value: 5, swap: true },
        { index: 2, value: 43, swap: true },
        { index: 3, value: 24, swap: false },
        { index: 4, value: 53, swap: false },
        { index: 5, value: 78, swap: false },
        { index: 6, value: 82, swap: false },
        { index: 7, value: 63, swap: false },
        { index: 8, value: 49, swap: false },
        { index: 9, value: 6, swap: false },
      ],
      encode: { x: "index", y: "value", key: "index", color: "swap" },
    },
    {
      type: "interval",
      data: [
        { index: 0, value: 2, swap: false },
        { index: 1, value: 5, swap: false },
        { index: 2, value: 6, swap: true },
        { index: 3, value: 24, swap: false },
        { index: 4, value: 53, swap: false },
        { index: 5, value: 78, swap: false },
        { index: 6, value: 82, swap: false },
        { index: 7, value: 63, swap: false },
        { index: 8, value: 49, swap: false },
        { index: 9, value: 43, swap: true },
      ],
      encode: { x: "index", y: "value", key: "index", color: "swap" },
    },
    {
      type: "interval",
      data: [
        { index: 0, value: 2, swap: false },
        { index: 1, value: 5, swap: false },
        { index: 2, value: 6, swap: false },
        { index: 3, value: 24, swap: true },
        { index: 4, value: 53, swap: false },
        { index: 5, value: 78, swap: false },
        { index: 6, value: 82, swap: false },
        { index: 7, value: 63, swap: false },
        { index: 8, value: 49, swap: false },
        { index: 9, value: 43, swap: false },
      ],
      encode: { x: "index", y: "value", key: "index", color: "swap" },
    },
    {
      type: "interval",
      data: [
        { index: 0, value: 2, swap: false },
        { index: 1, value: 5, swap: false },
        { index: 2, value: 6, swap: false },
        { index: 3, value: 24, swap: false },
        { index: 4, value: 43, swap: true },
        { index: 5, value: 78, swap: false },
        { index: 6, value: 82, swap: false },
        { index: 7, value: 63, swap: false },
        { index: 8, value: 49, swap: false },
        { index: 9, value: 53, swap: true },
      ],
      encode: { x: "index", y: "value", key: "index", color: "swap" },
    },
    {
      type: "interval",
      data: [
        { index: 0, value: 2, swap: false },
        { index: 1, value: 5, swap: false },
        { index: 2, value: 6, swap: false },
        { index: 3, value: 24, swap: false },
        { index: 4, value: 43, swap: false },
        { index: 5, value: 49, swap: true },
        { index: 6, value: 82, swap: false },
        { index: 7, value: 63, swap: false },
        { index: 8, value: 78, swap: true },
        { index: 9, value: 53, swap: false },
      ],
      encode: { x: "index", y: "value", key: "index", color: "swap" },
    },
    {
      type: "interval",
      data: [
        { index: 0, value: 2, swap: false },
        { index: 1, value: 5, swap: false },
        { index: 2, value: 6, swap: false },
        { index: 3, value: 24, swap: false },
        { index: 4, value: 43, swap: false },
        { index: 5, value: 49, swap: false },
        { index: 6, value: 53, swap: true },
        { index: 7, value: 63, swap: false },
        { index: 8, value: 78, swap: false },
        { index: 9, value: 82, swap: true },
      ],
      encode: { x: "index", y: "value", key: "index", color: "swap" },
    },
    {
      type: "interval",
      data: [
        { index: 0, value: 2, swap: false },
        { index: 1, value: 5, swap: false },
        { index: 2, value: 6, swap: false },
        { index: 3, value: 24, swap: false },
        { index: 4, value: 43, swap: false },
        { index: 5, value: 49, swap: false },
        { index: 6, value: 53, swap: false },
        { index: 7, value: 63, swap: true },
        { index: 8, value: 78, swap: false },
        { index: 9, value: 82, swap: false },
      ],
      encode: { x: "index", y: "value", key: "index", color: "swap" },
    },
    {
      type: "interval",
      data: [
        { index: 0, value: 2, swap: false },
        { index: 1, value: 5, swap: false },
        { index: 2, value: 6, swap: false },
        { index: 3, value: 24, swap: false },
        { index: 4, value: 43, swap: false },
        { index: 5, value: 49, swap: false },
        { index: 6, value: 53, swap: false },
        { index: 7, value: 63, swap: false },
        { index: 8, value: 78, swap: true },
        { index: 9, value: 82, swap: false },
      ],
      encode: { x: "index", y: "value", key: "index", color: "swap" },
    },
    {
      type: "interval",
      data: [
        { index: 0, value: 2, swap: false },
        { index: 1, value: 5, swap: false },
        { index: 2, value: 6, swap: false },
        { index: 3, value: 24, swap: false },
        { index: 4, value: 43, swap: false },
        { index: 5, value: 49, swap: false },
        { index: 6, value: 53, swap: false },
        { index: 7, value: 63, swap: false },
        { index: 8, value: 78, swap: false },
        { index: 9, value: 82, swap: true },
      ],
      encode: { x: "index", y: "value", key: "index", color: "swap" },
    },
  ],

});

chart.render();
},[])

    return (
        <div id="Algorithm" ref={container}></div>
    )
}

export default Algorithm;